<!--    RGB  颜色转换模块   -->
<template>
  <div class="container">
    <!--  面包屑导航 -->
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/onlinetool/#/">首页</a></li>
        <li class="breadcrumb-item"><a href="#">休闲娱乐</a></li>
        <li class="breadcrumb-item active" aria-current="page">RGB颜色转换</li>
      </ol>
    </nav>

    <!--  头部卡片  -->
    <div class="card border-primary">
      <!--  放在 .card 里面的标签默认宽度会占满父元素宽度, 所以 a 标签应该放在 .card-body 里面-->
      <div class="card-header">RGB颜色转换</div>
      <div class="card-body ">
        <h5 class="card-title text-primary">实现RGB颜色和16进制数之间的相互转换</h5>
        <p class="card-text"></p>
        <!--          <a href="#" class="btn btn-outline-success">获取每日笑话</a>-->
        <div class="spinner-border text-success ml-5" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>

    <form class="mt-3 border border-primary">
      <div class="row">
        <div class="col">
          <label for="red">Red</label>
          <input id="red" v-model="red" type="number" class="form-control" placeholder="请输入红色对应的数值" required>
        </div>
        <div class="col">
          <label for="green">Green</label>
          <input id="green" v-model="green" type="number" class="form-control" placeholder="请输入绿色对应的数值" required>
        </div>
        <div class="col">
          <label for="blue">Blue</label>
          <input id="blue" v-model="blue" type="number" class="form-control" placeholder="请输入蓝色对应的数值" required>
        </div>
      </div>

      <button type="submit" v-on:click.prevent @click="numberToHexadecimal" class="btn btn-outline-success mt-2">数值转换为16进制</button>
    </form>


    <form class="mt-3 border border-primary">
      <div class="row">
        <div class="col">
          <label for="six">16进制数</label>
          <input id="six" v-model="hexadecimal" type="text" class="form-control" placeholder="请输入16进制数">
        </div>
      </div>
      <button type="submit" v-on:click.prevent @click="hexadecimalToNumber" class="btn btn-outline-success mt-2">16进制转换为数值</button>
    </form>

  </div>
</template>

<script>
  export default {
    name: 'RGBColor',
    data() {
      return {
        red: "",
        green: "",
        blue: "",
        /*  16进制数，开头的 # 号不用写，在后端自动加上 # 号*/
        hexadecimal: ""
      }
    },
    methods: {
      /*  数值转换为 16 进制 */
      async numberToHexadecimal() {
        this.$(".spinner-border").css("display", "inline-block");
        const result = await this.$http.get("http://116.62.157.224:8081/rgbToHexadecimal", {
          params: {
            r: this.red,
            g: this.green,
            b: this.blue
          }
        });
        console.log(result.data);
        this.hexadecimal = result.data;

        if (this.red !== "") {
          this.$(".spinner-border").css("display", "none");

        }
      },
      /*  十六进制转换为数值(存在特殊字符，待完善。)   */
      async hexadecimalToNumber() {
        this.$(".spinner-border").css("display", "inline-block");
        const result = await this.$http.get("http://localhost:8081/hexadecimalToRgb", {
          params: {
            hex: this.hexadecimal
          }
        });
        console.log(result.data);
        // this.hexadecimal = result.data;

        if (this.red !== "") {
          this.$(".spinner-border").css("display", "none");

        }
      },
    }
  }
</script>

<style scoped>
  .spinner-border {
    display: none;
  }
</style>
